<template>
  <div class="notice-list">
    <wi-navbar title="告知书列表" :isBack="false" />
    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
    <van-list
      v-if="list.length > 0"
      class="list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getListAll"
    >
      <div class="item" v-for="(item, index) in list" :key="item.id" :title="item">
        <div class="item-inner" @click="onDetail(item)">
          <div class="index">{{ index + 1 }}.</div>
          <div>{{ item.notificationName }}</div>
        </div>
      </div>
    </van-list>
    <div v-if="list.length == 0" class="no-list">
      <img class="no-list-img" :src="require('@/assets/images/data-null.png')" />
      <div class="no-list-txt">未查询到结果！</div>
    </div>
    <!-- </van-pull-refresh> -->
  </div>
</template>

<script>
import { getListAll, getList } from '@/api/notice/index'
import { Notify } from 'vant'
export default {
  data() {
    return {
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      pageNo: 0,
      pageSize: 15,
      pages: 0,
      list: []
    }
  },
  async created() {
    this.getListAll()
    //await this.onLoadData()
  },
  methods: {
    onDetail(item) {
      console.log(item.id)
      this.$router.push({
        path: '/notice/detail',
        query: {
          id: item.id
        }
      })
    },
    getListAll() {
      getListAll({
        signing: 1
      }).then(res => {
        if (res && res.success) {
          if (res.result.length > 0) {
            this.list = res.result
          }
        } else {
          Notify({ message: res.message, type: 'danger' })
        }
      })
      this.loading = false
    },
    async onLoadData() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
        this.pageNo = 0
      }
      this.pageNo = this.pageNo + 1
      const res = await this.getList()
      this.loading = false
      if (res && res.success) {
        this.pages = res.result.pages
        res.result.records.forEach(item => {
          this.list.push(item)
        })
      } else {
        Notify({ message: res.message, type: 'danger' })
      }
      if (this.pages == this.pageNo) {
        this.finished = true
      }
    },
    async getList() {
      const res = await getList({
        pageNo: this.pageNo,
        pageSize: this.pageSize
      })
      return res
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoadData()
    }
  }
}
</script>

<style lang="css" scoped>
.notice-list {
}
.list {
  background-color: #fff;
}
.item {
  padding: 0 20px;
}
.item-inner {
  padding: 10px 0;
  border-bottom: 1px solid #efefef;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1696f7;
  line-height: 30px;
  display: flex;
}
.index {
  color: #333333;
}

/* 列表页暂无数据 */
.no-list {
  width: 100%;
  /* margin-top: 14%; */
  border-radius: 16px;
  text-align: center;
}

.no-list-img {
  width: 125px;
  height: 133px;
  margin-top: 100px;
}

.no-list-txt {
  margin-top: 30px;
  height: 50vh;
  font-size: 17px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}
</style>
